<template>
  <view class="coupon-container">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <text class="nav-icon">‹</text>
      </view>
      <view class="nav-title">我的优惠券</view>
      <view class="nav-right"></view>
    </view>

    <!-- 状态切换 -->
    <view class="status-tabs">
      <view 
        v-for="(tab, index) in statusTabs" 
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        <text class="tab-text">{{ tab.name }}</text>
        <view v-if="tab.count > 0" class="tab-badge">{{ tab.count }}</view>
      </view>
    </view>

    <!-- 优惠券概览 -->
    <view class="coupon-overview">
      <view class="overview-item">
        <text class="overview-number">{{ totalCoupons }}</text>
        <text class="overview-label">总优惠券</text>
      </view>
      <view class="overview-item">
        <text class="overview-number">{{ availableCoupons }}</text>
        <text class="overview-label">可用券</text>
      </view>
      <view class="overview-item">
        <text class="overview-number">{{ usedCoupons }}</text>
        <text class="overview-label">已使用</text>
      </view>
      <view class="overview-item">
        <text class="overview-number">{{ expiredCoupons }}</text>
        <text class="overview-label">已过期</text>
      </view>
    </view>

    <!-- 优惠券列表 -->
    <scroll-view class="coupon-list" scroll-y="true">
      <view v-if="filteredCoupons.length === 0" class="empty-state">
        <text class="empty-icon">🎫</text>
        <text class="empty-text">暂无优惠券</text>
        <text class="empty-desc">快去商城逛逛，领取更多优惠券吧</text>
      </view>
      
      <view v-else>
        <view 
          v-for="coupon in filteredCoupons" 
          :key="coupon.id"
          class="coupon-card"
          :class="{ 
            'coupon-used': coupon.status === 'used',
            'coupon-expired': coupon.status === 'expired'
          }"
        >
          <view class="coupon-left">
            <view class="coupon-amount">
              <text class="amount-symbol">¥</text>
              <text class="amount-number">{{ coupon.amount }}</text>
            </view>
            <text class="coupon-condition">满{{ coupon.minAmount }}元可用</text>
          </view>
          
          <view class="coupon-center">
            <view class="coupon-info">
              <text class="coupon-name">{{ coupon.name }}</text>
              <text class="coupon-desc">{{ coupon.description }}</text>
              <view class="coupon-time">
                <text class="time-label">有效期：</text>
                <text class="time-value">{{ formatDate(coupon.startTime) }} - {{ formatDate(coupon.endTime) }}</text>
              </view>
            </view>
            
            <view class="coupon-bottom">
              <view class="coupon-status">
                <text v-if="coupon.status === 'available'" class="status-available">可使用</text>
                <text v-else-if="coupon.status === 'used'" class="status-used">已使用</text>
                <text v-else-if="coupon.status === 'expired'" class="status-expired">已过期</text>
              </view>
              
              <view class="coupon-action">
                <view v-if="coupon.status === 'available'" class="action-btn" @click.stop="useCoupon(coupon)">
                  <text class="btn-text">立即使用</text>
                </view>
                <view v-else class="action-disabled">
                  <text class="disabled-text">{{ coupon.status === 'used' ? '已使用' : '已过期' }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作 -->
    <view class="bottom-actions">
      <view class="bottom-btn primary-btn" @click="getCoupons">
        <view class="btn-icon">
          <text class="icon-symbol">🎁</text>
        </view>
        <view class="btn-content">
          <text class="btn-title">领取优惠券</text>
          <text class="btn-subtitle">更多优惠等你来</text>
        </view>
      </view>
      
      <view class="bottom-btn secondary-btn" @click="viewRules">
        <view class="btn-icon">
          <text class="icon-symbol">📋</text>
        </view>
        <view class="btn-content">
          <text class="btn-title">使用规则</text>
          <text class="btn-subtitle">了解使用说明</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      statusTabs: [
        { name: '全部', count: 0 },
        { name: '可用', count: 0 },
        { name: '已使用', count: 0 },
        { name: '已过期', count: 0 }
      ],
      coupons: [
        {
          id: 1,
          name: '新用户专享券',
          description: '首次购买专用优惠券',
          amount: 20,
          minAmount: 100,
          status: 'available',
          startTime: '2024-01-01',
          endTime: '2024-12-31'
        },
        {
          id: 2,
          name: '满减优惠券',
          description: '全场通用满减券',
          amount: 50,
          minAmount: 300,
          status: 'available',
          startTime: '2024-01-01',
          endTime: '2024-06-30'
        },
        {
          id: 3,
          name: '生日特惠券',
          description: '生日月专属优惠',
          amount: 30,
          minAmount: 200,
          status: 'used',
          startTime: '2024-01-01',
          endTime: '2024-03-31'
        },
        {
          id: 4,
          name: '节日促销券',
          description: '节日活动优惠券',
          amount: 15,
          minAmount: 80,
          status: 'expired',
          startTime: '2023-12-01',
          endTime: '2023-12-31'
        }
      ]
    }
  },
  
  computed: {
    totalCoupons() {
      return this.coupons.length
    },
    availableCoupons() {
      return this.coupons.filter(c => c.status === 'available').length
    },
    usedCoupons() {
      return this.coupons.filter(c => c.status === 'used').length
    },
    expiredCoupons() {
      return this.coupons.filter(c => c.status === 'expired').length
    },
    filteredCoupons() {
      if (this.currentTab === 0) return this.coupons
      if (this.currentTab === 1) return this.coupons.filter(c => c.status === 'available')
      if (this.currentTab === 2) return this.coupons.filter(c => c.status === 'used')
      if (this.currentTab === 3) return this.coupons.filter(c => c.status === 'expired')
      return this.coupons
    }
  },
  
  onLoad() {
    this.updateTabCounts()
  },
  
  methods: {
    goBack() {
      if (getCurrentPages().length > 1) {
        uni.navigateBack()
      } else {
        uni.switchTab({
          url: '/pages/myInfo/myInfo'
        })
      }
    },
    
    switchTab(index) {
      this.currentTab = index
    },
    
    updateTabCounts() {
      this.statusTabs[0].count = this.totalCoupons
      this.statusTabs[1].count = this.availableCoupons
      this.statusTabs[2].count = this.usedCoupons
      this.statusTabs[3].count = this.expiredCoupons
    },
    
    formatDate(dateStr) {
      const date = new Date(dateStr)
      return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, '0')}.${String(date.getDate()).padStart(2, '0')}`
    },
    
    useCoupon(coupon) {
      if (coupon.status !== 'available') return
      
      uni.showModal({
        title: '使用优惠券',
        content: `确定要使用"${coupon.name}"吗？`,
        success: (res) => {
          if (res.confirm) {
            // 这里可以跳转到商城或订单页面
            uni.showToast({
              title: '跳转到商城使用',
              icon: 'success'
            })
          }
        }
      })
    },
    
    getCoupons() {
      uni.showToast({
        title: '跳转到优惠券中心',
        icon: 'success'
      })
    },
    
    viewRules() {
      uni.showModal({
        title: '优惠券使用规则',
        content: '1. 优惠券仅限本人使用\n2. 不可与其他优惠同时使用\n3. 过期自动失效\n4. 部分商品不参与优惠',
        showCancel: false
      })
    }
  }
}
</script>

<style scoped>
.coupon-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 32rpx;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10rpx);
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.nav-left {
  width: 80rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-icon {
  font-size: 48rpx;
  color: #2c3e50;
  font-weight: 300;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #2c3e50;
}

.nav-right {
  width: 80rpx;
}

/* 状态切换 */
.status-tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.95);
  margin: 24rpx 32rpx;
  border-radius: 16rpx;
  padding: 8rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.tab-item {
  flex: 1;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12rpx;
  position: relative;
  transition: all 0.3s ease;
}

.tab-item.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.3);
}

.tab-text {
  font-size: 28rpx;
  font-weight: 500;
  color: #666;
  transition: color 0.3s ease;
}

.tab-item.active .tab-text {
  color: #fff;
}

.tab-badge {
  position: absolute;
  top: 12rpx;
  right: 12rpx;
  background: #ff4757;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 20rpx;
  min-width: 32rpx;
  text-align: center;
}

/* 优惠券概览 */
.coupon-overview {
  display: flex;
  background: rgba(255, 255, 255, 0.95);
  margin: 0 32rpx 24rpx;
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.overview-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.overview-number {
  font-size: 48rpx;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 8rpx;
}

.overview-label {
  font-size: 24rpx;
  color: #7f8c8d;
}

/* 优惠券列表 */
.coupon-list {
  flex: 1;
  padding: 0 32rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 0;
}

.empty-icon {
  font-size: 120rpx;
  margin-bottom: 32rpx;
}

.empty-text {
  font-size: 32rpx;
  color: #fff;
  margin-bottom: 16rpx;
  font-weight: 500;
}

.empty-desc {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.7);
}

.coupon-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  padding: 32rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.coupon-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 8rpx;
  height: 100%;
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.coupon-card.coupon-used,
.coupon-card.coupon-expired {
  opacity: 0.6;
}

.coupon-card.coupon-used::before,
.coupon-card.coupon-expired::before {
  background: #95a5a6;
}

.coupon-left {
  width: 140rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 24rpx;
  flex-shrink: 0;
}

.coupon-amount {
  display: flex;
  align-items: baseline;
  margin-bottom: 8rpx;
}

.amount-symbol {
  font-size: 24rpx;
  color: #e74c3c;
  font-weight: 600;
}

.amount-number {
  font-size: 48rpx;
  color: #e74c3c;
  font-weight: 700;
}

.coupon-condition {
  font-size: 20rpx;
  color: #7f8c8d;
  text-align: center;
}

.coupon-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.coupon-info {
  margin-bottom: 16rpx;
}

.coupon-name {
  font-size: 32rpx;
  color: #2c3e50;
  font-weight: 600;
  margin-bottom: 8rpx;
  display: block;
}

.coupon-desc {
  font-size: 24rpx;
  color: #7f8c8d;
  margin-bottom: 12rpx;
  display: block;
}

.coupon-time {
  display: flex;
  align-items: center;
}

.time-label {
  font-size: 22rpx;
  color: #95a5a6;
}

.time-value {
  font-size: 22rpx;
  color: #7f8c8d;
}

.coupon-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.coupon-status {
  flex-shrink: 0;
}

.status-available {
  font-size: 22rpx;
  color: #27ae60;
  background: rgba(39, 174, 96, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
}

.status-used,
.status-expired {
  font-size: 22rpx;
  color: #95a5a6;
  background: rgba(149, 165, 166, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
}

.coupon-action {
  margin-left: 16rpx;
  flex-shrink: 0;
}

.action-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 20rpx;
  padding: 18rpx 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.25);
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  position: relative;
  overflow: hidden;
  min-width: 100rpx;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: left 0.6s ease;
}

.action-btn:active::before {
  left: 100%;
}

.action-btn:active {
  transform: translateY(-1rpx) scale(0.98);
  box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.35);
}

.btn-text {
  color: #fff;
  font-size: 24rpx;
  font-weight: 600;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.action-disabled {
  background: rgba(189, 195, 199, 0.08);
  border: 1rpx solid rgba(189, 195, 199, 0.15);
  border-radius: 20rpx;
  padding: 18rpx 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100rpx;
}

.disabled-text {
  color: #bdc3c7;
  font-size: 22rpx;
  font-weight: 500;
  white-space: nowrap;
}

/* 底部操作 */
.bottom-actions {
  display: flex;
  gap: 16rpx;
  margin: 24rpx 32rpx 32rpx;
}

.bottom-btn {
  flex: 1;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 28rpx 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.bottom-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.05), transparent);
  transition: left 0.6s ease;
}

.bottom-btn:active::before {
  left: 100%;
}

.bottom-btn:active {
  transform: translateY(-2rpx) scale(0.98);
  box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
}

.btn-icon {
  width: 64rpx;
  height: 64rpx;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  position: relative;
}

.primary-btn .btn-icon {
  background: linear-gradient(135deg, #667eea, #764ba2);
  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.25);
}

.secondary-btn .btn-icon {
  background: linear-gradient(135deg, #95a5a6, #7f8c8d);
  box-shadow: 0 4rpx 16rpx rgba(149, 165, 166, 0.25);
}

.icon-symbol {
  font-size: 32rpx;
  filter: drop-shadow(0 1rpx 2rpx rgba(0, 0, 0, 0.2));
}

.btn-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rpx;
}

.btn-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #2c3e50;
  line-height: 1.2;
  text-align: center;
}

.btn-subtitle {
  font-size: 22rpx;
  color: #7f8c8d;
  line-height: 1.3;
  text-align: center;
}
</style>